<template>
    <div id="vue">
        单选框组选中{{radio}}<br>
        <el-radio-group v-model="radio" @change="test1">
            <el-radio label="one">#</el-radio>
            <el-radio label="two">@</el-radio>
            <el-radio label="three">$</el-radio>
        </el-radio-group>
        <br>

        复选框选中<lable id="word"></lable>
        <el-checkbox-group v-model="checkbox" @change="test2" :min="1" :max="3">
            <el-checkbox :label="checkedCities[0]"></el-checkbox>
            <el-checkbox :label="checkedCities[2]"></el-checkbox>
            <el-checkbox :label="checkedCities[1]"></el-checkbox>
        </el-checkbox-group>
        <el-checkbox  v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
        <br>
        输入框
        <el-input placeholder="请输入姓名" v-model="input" type="text" show-word-limit maxlength="150">
            <i slot="prefix" class="el-input__icon el-icon-date"></i>
        </el-input>
        <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="餐厅名" value="1"></el-option>
                    <el-option label="订单号" value="2"></el-option>
                    <el-option label="用户电话" value="3"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <br>
        计数器
        <el-input-number v-model="num" :max="10" :step="0.1" :precision="3" 
        @change="seeNumber"></el-input-number>
        <br>
        选择器
        <el-select v-model="value" placeholder="请选择" multiple @change="seeSelect"
        style="width:300px">
            <el-option v-for="item in citi" :key="item.value" :label="item.label"
            :value="item.value">
                <span>{{ item.label }}</span>---
                <span>{{ item.value }}</span>
            </el-option>
        </el-select>
        <br>
        滑块
        <el-slider v-model="v" range :marks="marks"></el-slider>
        <br>
        时间选择器
        <el-time-select v-model="time" placeholder="选择时间" @change="seeTime"
            :picker-options="{selectableRange:'18:30:00 - 23:59:59'}">
        </el-time-select>

    </div>
</template>

<script>
    const cityOptions = ['上海', '北京', '广州', '深圳'];
    export default {
        data () {
            return {
                radio: '',
                checkbox:[],
                checkAll: false,
                checkedCities: ['上海', '北京','深圳'],
                cities: cityOptions,
                city:'???',
                input:'',
                num:'1.1',
                f:'false',
                select:'',
                citi: [{
                    value: 'Beijing',
                    label: '北京'
                }],
                value: '',
                v: [30, 60],
                marks: {
                    0: '0°C',
                    8: '8°C',
                    37: '37°C',
                    50: {
                        style: {color: '#1989FA'},
                        label: '50%'
                    }
                },
                time:new Date(2016,9,10,18,33),

            };
        },
        methods:{
            handleCheckAllChange(val) {
            
            this.checkedCities = val ? cityOptions : [];
            
            },
            handleCheckedCitiesChange(value) {
                console.log(value);
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
            
            },
            test1:function(chioce){
                    console.log(chioce);
            },
            test2:function(val){
                    document.getElementById("word").innerHTML=val;
            },
            seeNumber(n1,n2){
                console.log(n1,n2);//n1是目前的数，n2是之前的数

            },
            seeSelect(val){
                console.log(val);
            },
            seeTime(val){
                console.log(val);
            }
        },
    }
</script>
<!--
<template>
    <div id="vue">
        test
        <el-row :gutter="10" class="row">
            <el-col :span="2" :offset="1">
                <div class="content span1">？？？</div>
            </el-col>
            <el-col :span="2" :offset="1">
                <div class="content span2">？？？</div>
            </el-col>
            <el-col :span="2" >
                <div class="content span1">？？？</div>
            </el-col>
        </el-row>
        <el-row :gutter="10" class="row">
            <el-col :span="2" :offset="1">
                <div class="content span1">？？？</div>
            </el-col>
            <el-col :span="2">
                <div  class="content span2">？？？</div>
            </el-col>
            <el-col :span="2">
                <div  class="content span1">？？？</div>
            </el-col>
            <el-col :span="2">
                <div  class="content span2">？？？</div>
            </el-col>
        </el-row>
        <el-row :gutter="10" class="row">
            <el-col :span="2" :push="1">
                <div class="content span1">？？？</div>
            </el-col>
            <el-col :span="2" :push="1">
                <div  class="content span2">？？？</div>
            </el-col>
            <el-col :span="2">
                <div  class="content span1">？？？</div>
            </el-col>
        </el-row>
        <el-row :gutter="10" class="row">
            <el-col :span="2">
                <div class="content span1">？？？</div>
            </el-col>
            <el-col :span="2">
                <div  class="content span2">？？？</div>
            </el-col>
            <el-col :span="2">
                <div  class="content span1">？？？</div>
            </el-col>
            <el-col :span="2">
                <div  class="content span2">？？？</div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                radio: '1'
            };
        },
        methods:{
            tryb:function(){
                console.log(4+5);
            }
        }
    }
</script>
<style scoped>
    .row{
        margin-bottom: 10px;
    }
    .content{
        min-height: 10px;
        border-radius: 4px; 
        border: 1px solid black ; 
    }
    .span1{
        background-color:gold;
    }
    .span2{
        background-color:green;
    }
</style>
-->